<template>
  <div class="cs-table-option">
    <vxe-table :data="currentShowColumData" :ref="optionKey">
      <vxe-column width="60">
        <template #default>
          <span class="drag-btn">
            12312
          </span>
        </template>
      </vxe-column>
      <vxe-column field="title" title="列名"></vxe-column>
      <vxe-column field="width" title="列宽度">
        <template #default="{ row }">
          <i-input v-model="row.width"></i-input>
        </template>
      </vxe-column>
      <vxe-column field="defaultWidth" title="默认列宽度"></vxe-column>
      <vxe-column field="isHide" title="是否显示">
        <template #default="{ row }">
          <i-switch v-model="row.isHide"></i-switch>
        </template>
      </vxe-column>
      <vxe-column field="leftFixed" title="是否左固定">
        <template #default="{ row }">
          <i-switch v-model="row.leftFixed"></i-switch>
        </template>
      </vxe-column>
      <vxe-column field="rightFixed" title="是否右固定">
        <template #default="{ row }">
          <i-switch v-model="row.rightFixed"></i-switch>
        </template>
      </vxe-column>
      <vxe-column field="sort" title="排序"></vxe-column>
      <vxe-column field="defaultSort" title="默认排序"></vxe-column>
    </vxe-table>
    <div class="option-btn-group">
      <Button @click="resetTableOption">恢复默认配置</Button>
      <Button @click="getRemoteTableOption">同步配置</Button>
      <Button @click="upTableOption">保存配置</Button>
    </div>
    <Spin size="large" fix v-if="configureBoxLoading">
      <template>
        <div class="">
          加载特效
        </div>
      </template>
    </Spin>
  </div>
</template>

<script>
  import Sortable from "sortablejs";
  export default{
    name:"cs-table-option",
    props:{
      optionKey:{},
      hasLocalOption:{},
      // 当前使用数据 - 本地用户数据 或者 开发配置的数据
      currentColumData:{},
      // 远程数据 - 运维配置
      remoteColumData:{},
      // 开发配置的数据
      programColumData:{},
      // 容器尺寸
      boxHeight:{},
      boxWidth:{},
      // 配置状态
      configureBoxLoading:{default:true},
    },
    methods: {
      compare(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return value1 - value2;
          }
      },
      // 将本地配置 修改成 远程数据
      resetTableOption(){

      },
      // 获取用户配置的远程配置
      getRemoteTableOption(){

      }, 
      //上传用户本地配置
      upTableOption(){
        // 获取当前的配置文件，同步文件
        this.$emit('upOptionData',this.currentShowColumData)
      },
      // 数据比对
      columnDataComparison(){
        // 远程数据
        if(this.remoteColumData && this.remoteColumData.length){

        } else {
          // 判断是否有本地数据
          if(this.hasLocalOption){

          } else {
            this.currentShowColumData =  JSON.parse(JSON.stringify(this.currentColumData));
            this.currentShowColumData.map(item=>{
              item.defaultWidth = item.width;
              item.defaultSort = item.sort;
            });
            this.currentShowColumData = this.currentShowColumData.sort(this.compare('sort'));
          }
        }
      },
      // 拖拽
      rowDrop () {
        this.$nextTick(() => {
          const xTable = this.$refs[this.optionKey];
          this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
            handle: '.drag-btn',
            onEnd: ({ newIndex, oldIndex }) => {
              this.currentShowColumData.splice(newIndex, 0, this.currentShowColumData.splice(oldIndex, 1)[0]);
              var newArray = this.currentShowColumData.slice(0);
              this.currentShowColumData = [];
              this.$nextTick(()=> {
                this.currentShowColumData = newArray;
                this.currentShowColumData.map((item,index)=>{
                  item.sort = index+1;
                });
              })
            }
          })
        })
      }
    },
    data(){
      return {
        // 展示的数据
        currentShowColumData:[],
      }
    },
    created () {
      this.rowDrop();
    },
    beforeDestroy () {
      if (this.sortable1) {
        this.sortable1.destroy()
      }
    },
  }
</script>
<style lang="less" scoped>
    @import url('./index.less');
</style>